<template>
	<view class="rider_index_content">
		<riderCommonPopup key="home_popup"/>
		
		<view class="status_bar" :style="{height:`${statusBarHeight}px`}">
            <!-- 这里是状态栏 -->
        </view>
		<div class="rider_header">
			<div class="rider_head_cont">
				<div class="top_header">
					<div class="rider_left flex flexAlignItems">
						<div class="btnBox red_point opacityBtn" @click="showDrawer">
							<uni-icons  type="bars" size="18" color="#fff"></uni-icons>
						</div>
						<div class="user_status_box opacityBtn">
							<uni-icons 
								:type="`${onlineStatus.value==1?'smallcircle-filled':'minus-filled'}`" 
								size="18" 
								class="status_icon"
								:class="`${onlineStatus.value==1?'online':'offline'}`"
							></uni-icons>
							<uni-data-select
							v-model="onlineStatus.value"
							:localdata="onlineStatus.list"
							@change="userStatusChange"
							:clear="false"
							></uni-data-select>
						</div>
						<!-- <div class="btnBox opacityBtn rider_notify_box">
							<uni-icons  type="notification-filled" size="22" color="#fff"></uni-icons>
							<div class="rider_notify_count">8</div>
						</div> -->
					</div>

				</div>
				<div class="tabList">
					<div 
						class="tabItem"
						v-for="(item,index) in tabListModule"
						:key="index"
					>
						<div class="item flex flexAlignItems rider_notify_box"
							@click="selectTab(item.value)"
							:class="{'active':headTabIndex===item.value}"
						>
							<div class="name">
								<uni-icons  :type="item.icon" size="18" color="#b6b6b6" class="tabIcon"></uni-icons>{{ item.name }}
								<div class="rider_notify_text_count" v-if="item.list.length>0">{{ item.list.length }}</div>
							</div>
						</div>
					</div>
					<!-- 转单二维码 -->
					<div class="tabItem turnTabItem">
						<div class="item flex flexAlignItems rider_notify_box"
							:class="{'active':headTabIndex===4}"
							@click="selectTab(4)"
						>
							<div class="name">
								<uni-icons type="scan" size="18" color="#b6b6b6" class="tabIcon"></uni-icons>转接单
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<scroll-view class="scrollViewOrderList" :style="`height: calc(100vh - 90px - ${statusBarHeight}px)`"  scroll-y="true">
			<div v-if="headTabIndex===4" style="height:100%">
				<riderTurnOrder :showScanBtn="false"/>
			</div>
			<div class="rider_content" v-else>
				<div class="order_list">
					<div 
						class="order_item_box" 
						v-if="tabListModule[headTabIndex].list.length>0"
						style="width:100%"
					>
						<riderOrderItem 
							v-for="(item,index) in  tabListModule[headTabIndex].list" 
							:serverData="item"
							:key="item.current_loca_key"
							:dragBtnStyle="tabListModule[headTabIndex].dragBtnStyle"
						/>
					</div>

					<div 
						v-else
						class="order_empty_box noDataBox"
					>
						<div class="noDataBorder">
							<image src="~@/static/images/nodata.png" class="nodataPic"/>
						</div>
						<div class="noDataTips">
							当前暂无任何订单，刷新列表试试吧~
						</div>
					</div>
				</div>
			</div>
		</scroll-view>
		<uni-drawer ref="uniDrawerRef" mode="left" :width="250">
			<riderDrawerCont ref="riderDrawerContRef"/>
		</uni-drawer>
		<div class="fixed_bottom_help" v-if="headTabIndex!==4">
			<div class="online_btn help_btn" v-if="onlineStatus.value==2">
				<uni-icons type="arrow-up" size="20"></uni-icons>
				<div class="help_btn_text">上线</div>
			</div>
			<div 
				class="fixed_bottom_group"
				v-if="onlineStatus.value==1"
			>
				<div 
					class="refresh_btn help_btn" 
					@click="refreshList()"
				>
					<uni-icons 
						type="loop" size="20" 
						class="reload_icon" 
						:class="{'active':tabListModule[headTabIndex].loadStatus===`pending`}"
					></uni-icons>
					<div class="help_btn_text">刷新列表</div>
				</div>
				<div 
					class="refresh_btn help_btn" 
					:class="tabListModule[headTabIndex]?.fastBtnStyle?.customClass"
					v-if="headTabIndex!==0"
					@click="scanCodeChangeOrder(tabListModule[headTabIndex])"
				>
					<uni-icons 
						type="scan" size="20" 
						class="reload_icon" 
						color="#fff"
					></uni-icons>
					<div class="help_btn_text">
						{{ tabListModule[headTabIndex]?.fastBtnStyle?.btnText }}
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script src="./home.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './home.styl';
</style>
